<template>
	<view class="u-skeleton" :style="$theme.pageStyle">


		<z-nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed" title="律师详情">
		    <view class="preview" slot="center">律师详情</view> 
		</z-nav-bar>	
			

		<view class="header-bg">
			<view class="banner img-block">
				<image src="http://tuchuangwng.oss-cn-beijing.aliyuncs.com/2022/02/10/ff0aed747f17d.jpg" mode="">
				</image>
			</view>
			<view class="lawyer-card u-skeleton-fillet">

				<view class="img-block radius-m">
					<image :src="lawyerData.pic" mode="aspectFill"></image>
				</view>
				<view class="pad u-skeleton-fillet">
					<view class="tit">
						<view class="name">
							{{lawyerData.name}}{{$t('change.律师')}}
						</view>
					</view>
					<view class="data-num">
						<span>{{lawyerData.firm}}</span>

					</view>
				</view>
				<view class="help-show">
					<li class="help-show-li">
						<p class="help-show-p">
							<span class="din-b">
								5
							</span>
						</p>
						{{$t('change.服务评分')}}
					</li>
					<li class="help-show-li">
						<p class="help-show-p">
							<span class="din-b">
								{{randomNumber}}
							</span>
						</p>
						{{$t('change.服务人数')}}
					</li>
					<li class="help-show-li">
						<p class="help-show-p">
							<span class="din-b">
								1{{$t('change.分钟')}}
							</span>
						</p>
						{{$t('change.响应时间')}}
					</li>
				</view>
				<view class="info-intro" style="margin-top: 10px;" @click="IsShowApp()">
					<view class="info-intro-text">
						<span class="info-intro-text-js">{{$t('change.介绍')}} ：</span>
						{{lawyerData.speciality}}
					</view>
					<image src="../../static/youkh.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="aui-palace u-skeleton-fillet">
			<view class="bar-title">
				<view class="tit">
					{{$t('change.即时服务')}}
				</view>
			</view>

			<view class="clinic-content u-skeleton-fillet">
				<view class="cl-flex">
					<view class="cl-flex title">
						<image src="../../static/gou.png" mode=""></image>
						<span class="c-color-gray">{{$t('change.认证律师')}} </span>
					</view>
					<view class="cl-flex title">
						<image src="../../static/gou.png" mode=""></image>
						<span class="c-color-gray">{{$t('change.隐私保障')}} </span>
					</view>
					<view class="cl-flex title">
						<image src="../../static/gou.png" mode=""></image>
						<span class="c-color-gray">{{$t('change.未服务可退')}} </span>
					</view>
				</view>
			</view>

			<view class="tab-bar serve-tab mt12 u-skeleton-fillet">
				<view class="tab-nav">
					<li :class="tabIndex==1? 'nav-item is-this':'nav-item'" @click="tabClick(1)">
						<view class="box">
							<view class="" style="display: flex;">
								<image src="http://tuchuangwng.oss-cn-beijing.aliyuncs.com/2021/11/03/45c5e84dd40ae.png"
									mode="" class="icon"></image>
								<view class="tit">
									{{$t('change.图文咨询')}}
								</view>
							</view>
							<view class="other">
								<span class="u-price s-warn">
									￥
									<em class="din-b f-num">
										{{ Number(lawyerData.price_tuwen.price) }}
									</em>
								</span>
							</view>
						</view>
					</li>

					<li :class="tabIndex==2?'nav-item is-this':'nav-item'" @click="tabClick(2)">
						<view class="box">
							<view class="" style="display: flex;">
								<image src="http://tuchuangwng.oss-cn-beijing.aliyuncs.com/2021/11/03/e2e244adbffb8.png"
									mode="" class="icon"></image>
								<view class="tit">
									{{$t('change.电话咨询')}}
								</view>
							</view>
							<view class="other">
								<span class="u-price s-warn">
									￥
									<em class="din-b f-num">
										{{ Number(lawyerData.price_mobile.price) }}
									</em>
								</span>
							</view>
						</view>
					</li>
				</view>
			</view>
		</view>


		<view class="zhanwei">

		</view>


		<view class="bottom-bar u-skeleton-fillet">
			<view class="bottom-tab-ask">
				<li class="bottom-tab-ask-li">
					<button type="default" class="u-btn btn-primary btn-n btn-block" @click="topay()"
						>{{$t('change.立即咨询')}}
					</button>
				</li>
			</view>
		</view>


		<u-popup mode="bottom" :show="showApp" @close="closeshowApp" @open="openshowApp" :round="15" :closeable="true">
			<view style="padding-bottom: 30rpx;" class="showbottom">
				<view class="tag-show">
					<view class="tit" style="font-weight: bold;font-size: 25px;">
						{{$t('change.律师简介')}}
					</view>
					<view style="height: 25px;"></view>
					<p class="tag-group tag-info">
						<span class="u-tag" v-for="( tag ,index) in lawyerData.like" :key="index">
							{{ tag }}
						</span>
					</p>
				</view>
				<view style="height: 25px;"></view>
				<view class="layer2000">
					{{lawyerData.intro}}
				</view>
			</view>
		</u-popup>

		<u-popup :show="paypop" mode="bottom" :round="15" @close="closespaypop" @open="openpaypop">
			<view style="padding-bottom: 30rpx;height: 350px;" class="showbottom">
				<view class="pay-type-list">
					<view class="pay-title">{{$t('change.请选择支付方式')}} ：</view>
					<radio-group class="uni-flex" style="width: 100%;" name="gender">
						<block v-for="(item, index) in payList" :key="index">
							<view class="type-item" :class="{ 'act': index === selectedIndex }"
								@click="selectNav(item,index)">
								<image :src="item.icon" mode="" class="a-img"></image>
								<view class="con">
									<text class="tit">{{item.pay_way_name}}</text>
								</view>
							</view>
						</block>
					</radio-group>
				</view>
				<view class="botton" @click="confirm_pay">
					<text class="text110">{{$t('change.确认支付')}}</text>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	import Comment from '@/components/comment.vue';
	import itsCalendar from '@/components/its-calendar/its-calendar.vue';

	import {
		storeToRefs
	} from 'pinia';
	import {
		useMsgStore
	} from '@/store/message';
	import {
		useloginStore
	} from '@/store/login';
	import pinia from '@/store/index'
	// import scan from '@/common/scan.js'
	const msgStore = useMsgStore(pinia)
	const loginStore = useloginStore(pinia)
	const {
		unread,
		sysUnread
	} = storeToRefs(msgStore);

	export default {
		components: {
			itsCalendar,
			Comment
		},

		data() {
			return {
				isDataLoaded: false, // 标志：数据是否已加载
				id: '',
				scrollTop: 0,
				tabIndex: 1,
				lawyerData: {},
				law: [],
				text: '',
				lawcomment: [],
				lawarticle: [],
				courseData: [],
				evaluateData: [],
				lawcase: [],
				lawshanchang: '',
				showApp: false,
				showlogin: false,
				showinfo: false,
				loading: true,
				nickname: '',
				username: '',
				price: 0,
				hascoupon: 0,
				tuwentime: 0,
				coupontype: 0,
				reduce_amount: 0,
				islogin: 0,
				jd_status: 1,
				annuity: 0,
				free: 0,
				title: '',
				showprivate: false,
				activeIndex: 0,
				privateData: '',
				BtnType: 'service',
				isLogin: '',
				paypop: false,
				payList: uni.getStorageSync('pay'),
				Payinfo: {},
				pay_way: '',
				pay_config_id: 1,
				selectedIndex: 10,
				randomNumber: this.round(),
			}
		},
		watch: {
			'lawyerData.private': {
				handler(newVal) {
					if (newVal && newVal.length > 0) {
						this.privateData = newVal[0];
						this.activeIndex = 0;
					}
				},
				immediate: true
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(option) {
			this.id = option.id;
			// uni.showLoading({
			// 	title: '加载中....'
			// })
			// setTimeout(() => {
			// 	this.loading = false;
			// 	uni.hideLoading();
			// }, 1000)
		},
		onShow() {
			this.getlawinfo();
			if (uni.getStorageSync('token') == '') {
				this.islogin = 0
			} else {
				this.islogin = 1
				// this.loginload();
			}
		},
		mounted() {
			// 检查本地联系人,如果没有才去请求接口
			let contacts = uni.getStorageSync('allContacts');
			if (!contacts.length) {
				this.initContacts();
			}
			// 监听ws状态,如果重新连接了,要更新联系人
			uni.$on('socketStatus', (e) => {
				if (e) {
					this.initContacts();
				}
			})
		},
		//导航栏

		methods: {
			round() {
				return String(Math.floor(Math.random() * 10000)).padStart(3, '0');
			},
			initContacts() {
				console.log('initContacts -- ')
				this.modelName = '';
				this.$api.msgApi.initContacts().then(res => {
					if (res.code == 0) {
						// 设置消息未读数和系统消息未读数
						msgStore.sysUnread = res.count;
						msgStore.initContacts(res.data);
					}
				})
			},
			IsShowApp() {
				this.showApp = true
			},
			closeshowApp() {
				this.showApp = false
			},
			openshowApp() {},
			TimeData(e) {
				this.BtnType = e.type
				uni.setStorageSync('book', e)
				// console.log(e)
			},
			//选择私人法律顾问规格
			setSpecItem(idx, subitem) {
				this.activeIndex = idx;
				this.privateData = subitem
			},
			// 选择支付方式
			changePayType(item) {
				console.log(item)
				this.pay_way = item.pay_config_id
			},
			selectNav(item, index) {
				this.selectedIndex = index;
				this.pay_way = item.pay_config_id
				// this.getnavgoods()
			},
			//获取律师信息
			async getlawinfo() {
				try {
					const res = await $H.post('lawyer/lawallinfo', {
						id: this.id
					}, {
						token: true
					});
					this.lawyerData = res.data
					this.price = this.lawyerData.price_tuwen.price
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
			tabClick(index) {

				this.tabIndex = index;

				if (this.tabIndex == 1) {
					this.price = this.lawyerData.price_tuwen.price
				}else {
					this.price = this.lawyerData.price_mobile.price
				}
				this.BtnType = 'service'
			},

			Buycard() {
				uni.setStorageSync('privateData', this.privateData)
				return uni.navigateTo({
					url: '/pages/lawyer/private_detail?id=' + this.id
				})
			},
			Tourl(url) {
				uni.navigateTo({
					url: url
				})
			},
			topay() {

				if (this.islogin == 0) {
					return this.ToLogin();
				}

				if (this.tabIndex == 1) {
					return this.paypop = true
				} else if (this.tabIndex == 2) {
					
					uni.navigateTo({
						url: '/pages/index/mobile'
					})
					
				} else if (this.tabIndex == 3) {
				
				} else {
				
				}
			},

			ToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},

			agree() {
				uni.navigateTo({
					url: '/pages/login/serviceAgreement'
				})
			},
			yisi() {
				uni.navigateTo({
					url: '/pages/login/privacyAgreement'
				})
			},
			toarticle(url) {
				uni.navigateTo({
					url: url
				})
			},
			alllawyerarticle() {
				uni.navigateTo({
					url: '/pages/article/lawyerallarticle?mid=' + this.mid
				})
			},
			allcase() {
				uni.navigateTo({
					url: '/pages/case/allcase?mid=' + this.mid
				})
			},

			async confirm_pay() {
			
				if (this.selectedIndex === 10) {
					return uni.showToast({
						icon: "none",
						title: this.$t('change.请选择支付方式')
					})
				}
			
				try {
					const res = await $H.post('order/CreateNConsultOrder', {
						pay_way: this.pay_way,
						type: 1,
						ask: this.question
					}, {
						token: true
					});
					
					this.paypop = false
					if (res.code == 1) {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/order/consult/index'
								})
							}, 400)
						} else if(res.data.code == 2){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							// this.paypop = false
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								appId: res.data.config.appId,
								timeStamp: res.data.config.timeStamp,
								nonceStr: res.data.config.nonceStr,
								package: res.data.config.package,
								signType: res.data.config.signType,
								paySign: res.data.config.paySign,
								success: function(res) {
									//跳转到会话页面
									setTimeout(() => {
										uni.navigateTo({
											url: '/order/consult/index'
										})
									}, 400)
								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败',
										duration: 2000
									});
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
					
					
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
				
				
			
			},
			
			privateConsultant() {
				this.showprivate = true
			},
			closeshowprivate() {
				this.showprivate = false
			},
			openshowprivate() {},
			paypops() {
				this.paypop = true
			},
			closespaypop() {
				this.paypop = false
			},
			openpaypop() {

			}



		}

	}
</script>

<style lang="scss" scoped>
	/* 头部卡片 */
	.act {
		background: rgba(0, 122, 255, 0.1);
		border-radius: 15px;
	}

	.banner {
		height: 200px;
	}

	.img-block {
		position: relative;
		display: block;
	}

	.img-block image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.commont-box {
		display: flex;
		margin: 10px 20px 10px 30px;
		padding: 5px;
		border-radius: 5px;
		background-color: #f2f2f2;
	}

	.lawyer-card {
		position: relative;
		margin: -80px 15px 0;
		padding-bottom: 0.6rem;
		background: #fff url(https://css.66law.cn/ui_v1/m/pic/lawyer_home/bg/lawyer_card.png) no-repeat center top;
		background-size: 100% auto;
		border-radius: 14px;
	}

	.lawyer-card .img-block {
		position: absolute;
		left: 0.8rem;
		top: -1.35rem;
		width: 4.5rem;
		height: 4.5rem;
		// box-shadow: 0px 2px 2px rgb(0 0 0 / 10%);
		border-radius: 0.4rem;
	}

	.img-block image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.radius-m image {
		border-radius: 8px !important;
	}

	.lawyer-card .pad {
		padding: 0.8rem 0.6rem 0.9rem 5.9rem;
	}

	.lawyer-card .pad .tit {
		line-height: 1.4rem;
		overflow: hidden;
	}

	.lawyer-card .pad .tit .name {
		float: left;
		font-size: 1.2rem;
		max-width: 9rem;
		font-weight: 800;
	}

	.lawyer-card .pad .data-num {
		font-size: .8rem;
		color: #999;
		line-height: .8rem;
		height: 0.8rem;
		margin-top: 0.2rem;
	}

	.lawyer-card .pad .data-num span {
		float: left;
		margin-right: 0.3rem;
	}

	.lawyer-card .help-show {
		display: flex;
	}

	.lawyer-card .help-show .help-show-li {
		position: relative;
		flex: 1;
		text-align: center;
		font-size: .8rem;
		color: #bbb;
		line-height: .8rem;
	}

	.lawyer-card .help-show .help-show-p {
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		font-size: .8rem;
		color: #bf913e;
		margin-bottom: 0.5rem;
	}

	.lawyer-card .help-show li:after {
		position: absolute;
		top: 0.3rem;
		right: 0;
		content: '';
		width: 1px;
		height: 1.2rem;
		background-color: #e5e1d9;
	}

	.lawyer-card .help-show li .din-b {
		margin: -0.25rem 1px 0;
		font-size: 1.2rem;
	}

	.ico-gift,
	.lawyer-card .help-show li .din-b {
		display: inline-block;
		vertical-align: middle;
	}

	.lawyer-card .tag-show {
		margin: 0.4rem 0.8rem 0;
	}

	.lawyer-card .tag-show .title {
		float: left;
		font-size: 14px;
		color: #999;
	}

	.tag-group {
		overflow: hidden;
	}

	.is-disabled {
		color: #bbb !important;
	}

	.tag-group .u-tag {
		float: left;
		height: 1.1rem;
		line-height: 1.1rem;
		border-radius: 0.55rem;
		font-size: .55rem;
		margin: 0 0.2rem 0.2rem 0;
	}

	.tag-info .u-tag {
		background: #fff;
		border-color: #d9d9d9;
		color: #666;
	}

	.u-tag {
		padding: 0 5px;
		color: #666;
		margin: 4px;
		background-color: #f5f5f5;
		border: 1px solid transparent;
		border-radius: 4px;
		transition: background .2s linear, border-color .2s linear, color .2s linear;
	}

	.info-intro {
		height: 20px;
		font-size: 15px;
		color: #1f1f1f;
		line-height: 18px;
		padding: 0.4rem 0.8rem 0;
		display: flex;
		align-items: center;
	}

	.info-intro-text-js {
		font-size: 14px;
		color: #999;
	}

	.info-intro image {
		height: 15px;
		width: 15px;
	}

	.info-intro .info-intro-text {
		height: 20px;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		font-size: 14px;
		color: #999;
		line-height: 18px;
	}

	/* 在线服务卡片 */
	.aui-palace {
		position: relative;
		overflow: hidden;
		margin: 15px;
		background-color: #fff;
		border-radius: 14px;
		box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .05);
		transition: .3s all cubic-bezier(0, 1, 0.95, 1.05);
	}

	.bar-title {
		padding: 0.9rem 0.8rem 0.3rem;
		overflow: hidden;
	}

	.bar-title .tit {
		font-size: 1rem;
		line-height: 1.1rem;
		font-weight: 700;
	}

	.mt12 {
		margin-top: 0.6rem;
		margin-bottom: 0.6rem;
	}

	.serve-tab .tab-nav {
		padding: 0 0.6rem;
	}

	.serve-tab .tab-nav .nav-item {
		text-align: center;
		padding: 0.2rem 0.2rem;
	}

	.tab-nav .nav-item {
		padding: 0 0.4rem;
		text-align: center;
		font-size: .8rem;
		color: #666;
	}

	.serve-tab .tab-nav .nav-item .box {
		position: relative;
		display: flex;
		// height: 2.6rem;
		padding: 0.6rem 0;
		background-color: #fff;
		border-radius: 0.4rem;
		z-index: 10;
		border: 1px solid #f5f5f5;
		justify-content: space-between;
	}

	.serve-tab .tab-nav .nav-item .box .u-badge {
		position: absolute;
		right: -5px;
		top: -0.55rem;
		z-index: 10;
		padding: 0 0.2rem;
		border-radius: 0.2rem 0.2rem 0.2rem 0;
	}

	.u-badge {
		padding: 0 0.5rem;
		white-space: nowrap;
		border: 1px solid #999;
		background-color: #fff;
		color: #666;
		font-size: .5rem;
		line-height: .9rem;
		border-radius: 1rem;
		position: relative;
	}

	.u-badge.badge-warn-gradient {
		border-color: #ff7879;
		background: linear-gradient(77deg, #e72d2e 0%, #fe5f5f 100%);
		color: #fff;
	}

	.u-badge.badge-warn-gradient:before,
	.u-badge.badge-warn-gradient.icon-menu:after {
		border-top-color: transparent;
	}

	.u-badge:before,
	.u-badge.icon-menu:after {
		position: absolute;
		top: 100%;
		left: 50%;
		content: '';
		z-index: 10;
		margin-left: -0.2rem;
		border: 0.2rem solid transparent;
		border-top-color: #fff;
	}

	.serve-tab .tab-nav .nav-item .box .u-badge:after {
		border-top-color: #e72d2e;
		left: -0.05rem;
		top: 0.5rem;
		transform: rotate(135deg);
	}

	.u-badge.badge-warn-gradient:after {
		border-top-color: #f24546;
	}


	.serve-tab .tab-nav .nav-item.is-this .box:before {
		position: absolute;
		left: 0;
		top: 0;
		content: '';
		z-index: 5;
		width: 100%;
		height: 100%;
		border: 0.1rem solid var(--color-primary);
		background: rgba(0, 122, 255, 0.1);
		border-radius: 0.4rem;
		box-sizing: border-box;
	}

	.serve-tab .tab-nav .nav-item .icon {
		display: block;
		margin: 0px 10px 0px 10px;
		width: 1.6rem;
		height: 1.6rem;
	}

	.serve-tab .tab-nav .nav-item .tit {
		font-size: 16px;
		line-height: 25px;
		font-weight: 700;
	}

	.serve-tab .tab-nav .nav-item .other {
		font-size: .55rem;
		color: #bbb;
		line-height: 1.2rem;
		height: 1.2rem;
		margin-top: 0.25rem;
		margin-right: 15px;
	}

	.serve-tab .tab-nav .nav-item .other .u-price {
		display: inline-block;
		vertical-align: middle;
		margin: -2px 4px 0 0;
	}

	.u-price {
		height: 1.2rem;
		font-size: .55rem;
	}

	.s-warn {
		color: #ec3b3b !important;
	}

	.u-price .f-num {
		display: inline-block;
		vertical-align: middle;
		font-size: 1rem;
		margin-top: -6px;
	}

	em,
	i {
		font-style: normal;
	}

	ol,
	ul,
	li {
		list-style: none;
	}

	.clinic-content {
		background: #f5f5f5;
		margin: 15px;
		border-radius: 9px;
		padding: 7px 10px 8px;
		font-size: 14px;
		color: #858585;
	}

	.cl-flex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.title image {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.c-color {
		color: #525252;
	}

	.clinic-content-intro {
		margin-top: 10px;
	}

	.clinic-content-intro-list-item {
		position: relative;
		padding-left: 16px;
	}

	.clinic-content-intro-list-item::after {
		content: "";
		position: absolute;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #525252;
		left: 0;
		top: 50%;
		-webkit-transform: translate(4px);
		transform: translate(4px);
	}

	/* 评价 */









	/* 底部按钮 */
	.zhanwei {
		height: 80px;
	}

	.bottom-bar {
		position: fixed;
		z-index: 100;
		bottom: 0;
		width: 100%;
		z-index: 100;
	}

	.bottom-tab-ask {
		background-color: #fff;
	}

	.bottom-tab-ask-li {
		padding: 15px 20px;
	}

	.u-btn.btn-block {
		display: block;
		width: -webkit-fill-available;
	}

	.u-btn.btn-n {
		padding: 0 1rem;
		height: 50px;
		line-height: 50px;
		border-radius: 35px;
	}

	.u-btn.btn-primary {
		border-color: var(--color-primary);
		background-color: var(--color-primary);
		color: #fff;
	}

	.u-btn.btn-primary1 {
		border-color: #666;
		background-color: #666;
		color: #fff;
	}


	.f13 {
		font-size: .65rem !important;
	}

	.showbottom {
		padding: 20px;
	}



	.group20001 {
		padding: 20px;
		background-color: rgba(255, 255, 255, 1);
	}

	.section90001 {
		width: 30px;
		height: 30px;
	}

	.label40001 {
		width: 30px;
		height: 30px;
	}

	.section100001 {
		height: 64px;
	}

	.word800001 {
		height: 64rpx;
		display: block;
		overflow-wrap: break-word;
		color: rgba(78, 78, 79, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular;
		text-align: center;
		margin-top: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.section110001 {
		height: 70px;
		padding-top: 20px;
	}

	.outer10001 {
		height: 50px;
		border-radius: 35px;
		background-color: #2670ff;
		justify-content: center;
		align-items: center;
	}

	.outer10002 {
		height: 50px;
		border-radius: 35px;
		background-color: #75A5FB;
		justify-content: center;
		align-items: center;
	}

	.word90001 {
		display: block;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 22px;
		white-space: nowrap;
		line-height: 50px;
		text-align: center;
	}

	.section120001 {
		height: 48px;
	}

	.txt40001 {
		height: 48px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 18px;
		font-family: PingFangSC-Semibold;
		white-space: nowrap;
		line-height: 48px;
		text-align: center;
	}

	.section130001 {
		width: 70px;
		margin: 0 auto;
	}

	.img60001 {
		width: 71px;
		height: 100px;
	}

	.agreement {
		margin: 10px 0;
		color: #999;
		font-size: 14px;
		text-align: center;
	}

	//律师文章
	.other-info-item-article {
		margin-top: 8px;
		overflow: hidden;
		margin: 10px;
	}

	.other-info-item {
		height: fit-content;
	}

	.other-info-item .other-info-item-title {
		font-size: 18px;
		color: #000;
		line-height: 18px;
		margin-top: 15px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.other-info-item .other-info-item-origin {
		height: 16px;
		font-size: 14px;
		color: #999;
		margin-top: 15px;
		display: flex;
		align-items: center;
	}

	.other-info-item-origin .lawyer-profile-info-icon {
		margin-left: 0;
	}

	.lawyer-profile-info-icon {
		margin-right: 5px;
		padding: 2px 5px;
		background: rgba(0, 0, 0, .03);
		line-height: 11px;
		border-radius: 8px;
		border: 0.67px solid rgba(0, 0, 0, .15);
		margin-left: 5px;
		margin-top: -1px;
		font-size: 10px;
		color: #858585;
	}

	//律师文章结束

	//律师课程开始
	.course-box {
		.course_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;
			height: 90px;
			border-radius: 12px;
			padding: 10px;

			.img {
				width: 85px;
				height: 65px;
				border-radius: 5px;
			}

			.probox {
				width: 70%;
				height: 65px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title_item {
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					color: #333333;
					font-weight: bold;

					.title_price {
						width: 62px;
						color: #e54d42;
						text-align: right;
						font-size: 12px;
					}

					.title_price_price {
						font-weight: bold;
						font-size: 16px;
						color: #e54d42;
						text-align: right;
					}
				}

				.title_desc {
					color: #aaaaaa;
					font-size: 12px;
				}

				.free_tag {
					align-items: center;
					flex-wrap: wrap;
					display: flex;

					view {
						text-align: right;
						flex-basis: 40%;
					}
				}

			}

		}

	}



	//律师课程end

	.sd_free {
		margin: 0.5rem 0.6rem;
		height: 30px;
		background-color: #f93e3e;
		line-height: 30px;
		text-align: center;
		border-radius: 0.4rem;
		color: #ffffff;
		font-weight: 400;
		font-size: 14px;
	}




	.u-p-30 {
		padding: 16px !important;
	}

	.u-flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.u-flex-3 {
		flex: 3;
	}

	.u-image {
		position: relative;
		transition: opacity 0.5s ease-in-out;
	}

	.u-flex-7 {
		flex: 7;
	}

	.u-line-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.u-line-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.u-m-t-10 {
		margin-top: 5px !important;
	}

	.goods-name {
		font-size: 18px;
		font-weight: bold;
	}

	.goods-price-selling {
		font-size: 26px;
		font-weight: bold;
		color: red;
	}

	.goods-price-market {
		text-decoration: line-through;
		color: #666;
		font-size: 14px;
	}

	.goods-spec {
		font-size: 14px;
	}

	.u-m-t-30 {
		margin-top: 16px !important;
	}

	.u-content-color {
		color: #606266;
	}

	.u-number-box {
		margin-top: 15px;
		display: inline-flex;
		align-items: center;
	}

	.u-light-color {
		color: #c0c4cc;
	}

	.u-font-sm {
		font-size: 14px;
	}

	.m-inline-block {
		display: inline-block;
	}

	.u-p-t-20 {
		padding-top: 11px !important;
	}

	.u-m-b-10 {
		margin-bottom: 5px !important;
	}

	.u-m-r-10 {
		margin-right: 5px !important;
	}

	.u-m-t-10 {
		margin-top: 5px !important;
	}


	.btn {
		margin: 15px;
		border-radius: 25px;
		height: 45px;
		font-size: 16px;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--color-primary);
	}


	button {
		border: 0;
		background-color: transparent;
		outline: none;
		position: inherit;
		line-height: normal;
	}

	button::after {
		border: none;
		width: 0;
		height: 0;
	}

	.pay-type-list {
		// margin: 15px;
		margin-bottom: 10px;

		.pay-title {
			height: 70upx;
			font-size: 14px;
			line-height: 70upx;
			font-weight: bold;
			// border-bottom: 2upx solid #DDDAD4;
		}

		.type-item {
			height: 110upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			position: relative;
			padding: 10px;
			margin-bottom: 15px;

			// border-bottom: 2upx solid #DDDAD4;
			.a-img {
				width: 70upx;
				height: 70upx;
				margin-right: 20upx;
			}
		}

		.b-b {
			border-bottom: 2upx solid #DDDAD4;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}

		.icon-weixinzhifu {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: 28upx;
			color: #f97020;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 28upx;
			color: #f97020;
		}
	}

	.text110 {
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
	}


	.botton {
		bottom: 20px;
		position: fixed;
		width: 90%;
		border-radius: 44rpx;
		background-color: var(--color-primary);
		// margin: 10px;
		// margin-top: 80rpx;
		height: 50px;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
</style>